{extend name="index_layout"/}
{block name="main"}
<form class="layui-form" method="post">

    <div class="layui-form-item">
        <label class="layui-form-label">分类ID</label>
        <div class="layui-input-block">
            <select name="cid" lay-filter="fieldType" lay-verify="required">
                <option value=""></option>
                {volist name="cate" id="vo"}
                <option value="{$vo.id}">{$vo.cate_name}</option>
                {/volist}
            </select>
        </div>
    </div>

    <!--<div class="layui-form-item">-->
    <!--    <label class="layui-form-label">话题</label>-->
    <!--    <div class="layui-input-block">-->
    <!--        {:Form::text('hashtag','',["class"=>"form-tags"])}-->
    <!--    </div>-->
    <!--</div>-->
    <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block" onclick="showAnnex()">
            {:Form::radios('kind',[2=>'图片', 4=>'视频'], '')}
        </div>
    </div>



    <div class="layui-form-item" id="video" style="display: none">
        <label class="layui-form-label">选择视频</label>
        <a class="layui-btn layui-btn-sm" id="uploadMore">
            上传多个视频
        </a>
        <span style="font-size: 18px;color: red" id="nums"></span>
    </div>


    <div class="layui-form-item" id="title" style="display:none;">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input id="c-title" class=" layui-input" name="title" type="text" value="">
        </div>
    </div>



    <div class="layui-form-item" id="image" style="display: none">
        <label class="layui-form-label layui-form-item-required">图片</label>
        <div class="layui-input-block">
            <div class="layui-col-xs4">
                <input type="text" name="pic" id="c-pic" value="" class="layui-input">
            </div>
            <button type="button" class="layui-btn faupload" id="faupload-pic" data-multiple="true"
                    data-input-id="c-pic" data-preview-id="p-pic" data-type="image"><i
                    class="layui-icon layui-icon-upload"></i> 上传
            </button>
            <ul class="layui-row list-inline plupload-preview1" id="p-pic"></ul>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
            <input id="c-sort" lay-verify="required" class=" layui-input" name="sort" type="number" value="50">
        </div>
    </div>


    <div class="layui-form-item layer-footer">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
{/block}
{block name="script"}


<script type="text/javascript">
    function showAnnex() {
        var type = $("input[name='kind']:checked").val()
        console.log(type)
        if (type == 2) {
            $('#image').show();
            $('#video').hide();
            $('#title').show();
        } else {
            $('#image').hide();
            $('#video').show();
            $('#title').hidden();
        }

    }


    layui.use(['yznForm', 'aliossUploader'], function () {
        var yznForm = layui.yznForm;

        var aliossUploader = layui.aliossUploader;

        yznForm.bindevent($("form.layui-form"));
        layui.aliossUploader;
        let nums = 0
        aliossUploader.render({
            elm: '#uploadMore',
            region: 'oss-cn-beijing',
            bucket: 'tiktoks-video',
            layerTitle: '上传视频',
            accessidFiled: 'accessid',
            policyFiled: 'policy',
            signatureFiled: 'signature',
            codeFiled: 'code',
            codeStatus: 0,
            policyMethod: 'GET',
            policyData: {},
            policyUrl: '/api/oss_client/getOssSignature',
            httpStr: 'https',
            layerArea: ['800px', '500px'],
            prefixPath: 'coordtrans/',
            fileType: 'video',
            multiple: true,
            allUploaded: function (res) {
                nums += res.length
                res.forEach(function (item) {
                    var input = $('<input>')
                        .attr('type', 'hidden')
                        .attr('name', 'video[]') // 使服务器解析为数组的元素
                        .val(item.ossUrl); // 假设item是视频的标识或URL
                    $('form.layui-form').append(input);
                })

                $('#nums').text(nums + "个视频")

            },
            policyFailed: function (res) {
                layer.msg(JSON.stringify(res));
            },
            uploadRenderData: {
                size: 10000
            }
        });
    });
</script>


<script>

</script>


{/block}